<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通信网络设施管理平台</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/echarts.min.js"></script>
</head>

<body>
        <div class="tuli">
            
            </div>
    <div class="wrap">
        <div id="main" style="width: 2800px;height:2160px;"></div>
    </div>
    <div class="titbox">
        <div class="title">
            <img src="./img/logo.png" alt="" class="logo">通信网络设施管理平台
        </div>
        <div class="llnum clearfix">
            <div class="LLleft numberbox fl">
                <div class="number"><span>8500</span>M</div>
                <div class="type">总带宽</div>
            </div>
            <div class="LLright numberbox fl">
                <div class="number"><span>2000</span>台</div>
                <div class="type">总接入资产</div>
            </div>
        </div>
        <div class="shy">
            <h2 class="tit">各海域总带宽情况</h2>
            <div class="shytext"></div>
        </div>
        
    </div>
    <div class="bhhy poshy">
        <p class="name"> <a href="./bh.html">渤海</a></p>
        <div class="img"></div>
    </div>
    <div class="dhhy poshy">
        <p class="name"><a href="./dh.html">东海</a></p>
        <div class="img"></div>
    </div>
    <div class="nhdhy poshy">
        <p class="name"><a href="./nhd.html">南海东部</a></p>
        <div class="img"></div>
    </div>
    <div class="nhxhy poshy">
        <p class="name"><a href="./nhx.html">南海西部</a></p>
        <div class="img"></div>
    </div>
    <div class="chartsbox clearfix">
        <div class="chart-left fl bgb">
            <div class="type1 clearfix" style="height: 536px">
                <div class="w50 fl" style="position: relative">
                    <div class="charttit"><span class="icon blue"></span>宽带类型占比</div>
                    <div class="piborder"></div>
                    <div id="kuandai" style="width:650;height:410px"></div>
                </div>
                <div class="w50 fl">
                    <div class="charttit"><span class="icon blue"></span><span class="dk_tabtitle">四海卫星带宽</span></div>
                    <div class="shwxkd pos">
                        <ul class="legend">
                            <li class="index"><i class="legend-icon blue"></i><span class="name">卫星</span> <span
                                    class="number">5%</span></li>
                            <li><i class="legend-icon green"></i><span class="name">微波</span> <span
                                    class="number">90%</span></li>
                            <li><i class="legend-icon yellow"></i><span class="name">散射</span> <span
                                    class="number">5%</span></li>
                        </ul>
                        <div id="kd-tab">
                            <div class="item clearfix">
                                <div class="name fl fs">渤海</div>
                                <div class="bar fl">
                                    <div class="colorbar" style="width:20%"></div>
                                </div>
                                <div class="number fl">2000M</div>
                            </div>
                            <div class="item clearfix">
                                <div class="name fl fs">东海</div>
                                <div class="bar fl">
                                    <div class="colorbar" style="width:20%"></div>
                                </div>
                                <div class="number fl">2000M</div>
                            </div>
                            <div class="item clearfix">
                                <div class="name fl fs">南海东部</div>
                                <div class="bar fl">
                                    <div class="colorbar" style="width:20%"></div>
                                </div>
                                <div class="number fl">2000M</div>
                            </div>
                            <div class="item clearfix">
                                <div class="name fl fs">南海西部</div>
                                <div class="bar fl">
                                    <div class="colorbar" style="width:20%"></div>
                                </div>
                                <div class="number fl">2000M</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="type1" style="height: 529px">
                <div class="charttit"><span class="icon blue"></span>带宽冗余率</div>
                <div id="redundance">

                </div>
            </div>
            <div class="type1" style="height: 498px">
                <div class="charttit"><span class="icon green"></span>核心网络实时可用性</div>
                <div id="network" style="width: 1300px;height:360px;"></div>
            </div>

        </div>
        <div class="chart-right fl bgb">
            <div class="type2">
                <div class="charttit"><span class="icon blue"></span>CCTV监控视频</div>
                <div class="camera clearfix">
                    <div class="video fl"><img src="./img/camera.jpg" alt=""> </div>
                    <div class="video fl"><img src="./img/camera.jpg" alt=""></div>
                </div>
                <div class="charttit"><span class="icon green"></span>链路数量统计</div>
                <div id="lianlu">
                    
                </div>
            </div>
            <div class="type1" style="height: 498px">
                <div class="charttit"><span class="icon green"></span>Ka卫星流量使用情况</div>
                <div id="weixing"></div>
            </div>
        </div>
        <div class="chart-bottom fl bgb">
            <div class="type1" style="height: 366px;">
                <div class="charttit"><span class="icon orange"></span>资产统计</div>
                <div class="count clearfix">

                </div>
            </div>
        </div>
    </div>

</body>
<script src="./js/index1.js"></script>

</html>